<template>
    <ul class="menus">
        <!-- 以自定义标签包裹RouterLink生成的a标签 -->
        <!-- <li>
            <RouterLink to="/default">默认页面</RouterLink>
        </li> -->
        <!-- 以RouterLink的分发定义自定义标签，实现a表包裹自定义标签 -->
        <!-- <RouterLink to="/default">
            <li>默认页面</li>
        </RouterLink> -->
        <!-- 
            以RouterLink的分发加custom，启动分发标签替换a标签 
                => 当以替换方式完成导航标签生成时，会因为是非a标签丢失导航点击切换操作
                => 通过 RouterLink 组件分发的导航方法 navigate 进行事件绑定定义
        -->
        <!-- <RouterLink to="/default" custom #="{ navigate }">
            <li @click="navigate">默认页面</li>
        </RouterLink> -->
        <!-- <RouterLink to="/sing" >单文件组件</RouterLink>
        <RouterLink to="/file" >文件模块</RouterLink>
        <RouterLink to="/error" >工程错误和图片资源</RouterLink>
        <RouterLink to="/style" >样式处理</RouterLink>
        <RouterLink to="/build" >打包操作</RouterLink>
        <RouterLink to="/ajax" >ajax的集成和使用</RouterLink>
        <RouterLink to="/route" >路由模块</RouterLink>
        <RouterLink to="/element" >ElementUI使用</RouterLink> -->


        <RouterLink v-for="(m,i) in meuns" :to="m.path" custom #="{ navigate,isActive }" :key="i">
            <li :class="{ active:isActive }" @click="navigate">{{ m.name }}</li>
        </RouterLink>
    </ul>
    <div class="content">
        <RouterView></RouterView>
    </div>
</template>

<script>
export default {
    data() {
        return {
            meuns: [
                { name:"默认页面",path:"/default" },
                { name:"单文件组件",path:"/sing" },
                { name:"文件模块",path:"/file" },
                { name:"工程错误和图片资源",path:"/error" },
                { name:"样式处理",path:"/style" },
                { name:"打包操作",path:"/build" },
                { name:"ajax的集成和使用",path:"/ajax" },
                { name:"路由模块",path:"/route" },
                { name:"ElementUI使用",path:"/element" },
            ]
        }
    },
}
</script>

<style scoped>


.menus {
    list-style: none;
    padding: 0px;
    margin: 0px;
    background-color: rgba(245, 245, 245, 0.8);
    box-shadow: 0 0 10px 0px #999;
    position: sticky;
    top: 0px;
    z-index: 6;
    padding: 0px 20px;
    backdrop-filter: saturate(50%) blur(4px);
}

.menus li {
    display: inline-block;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
}

.menus li:hover {
    background-color: #333;
    color: white;
}

.content {
    padding: 20px;
    margin-bottom: 800px;
}
.router-link-active,.active{
    background-color: #333;
    color: white;
}
</style>
<!-- <style>
.router-link-active,.active{
    background-color: #333;
    color: white;
}
.router-link-exact-active,.exact-active{
    background-color: orange;
    color: #333;
}
</style> -->